<template>
  <div class="myagency-wrapper">
    <div class="myagency-wrapper-content">
      <h3 class="title">
        <span class="line"></span>我的代理商品
      </h3>
      <div class="content">
        <screen-bar
          :tab-list="tabList"
          :radio-screen="radioScreen"
          :select-screen="selectScreen"
          @changeState="changeState"
          @changeRadio="changeRadio"
        ></screen-bar>
        <div
          class="table-wrapper"
          v-loading="loading"
          :element-loading-text="loadingText"
          element-loading-spinner="el-icon-loading"
        >
          <div class="tb-scroll">
            <el-table
              :data="agencyList"
              border
              :header-cell-style="rowClass"
              :cell-style="cellStyle"
            >
              <el-table-column label="图片" width="120">
                <template slot-scope="scope">
                  <img
                    class="product_img"
                    :src="scope.row.product_img ? scope.row.product_img : require('@/assets/hall/mall_default.jpg')"
                  />
                </template>
              </el-table-column>
              <el-table-column label="商品信息">
                <template slot-scope="scope">
                  <p v-show="scope.row.product_area">{{scope.row.product_area}}</p>

                  <p>
                    <span v-show="scope.row.product_name">{{scope.row.product_name}}</span>
                    <span v-show="scope.row.product_place">/{{scope.row.product_place}}</span>
                    <span v-show="scope.row.product_style">/{{scope.row.product_style}}</span>
                  </p>
                </template>
              </el-table-column>
              <el-table-column label="已付订金(元)" width="130">
                <template slot-scope="scope">{{scope.row.deposit_paid}}</template>
              </el-table-column>
              <el-table-column label="代理费率" width="130">
                <template
                  slot-scope="scope"
                >{{scope.row.agent_rate ? (scope.row.agent_rate * 100).toFixed(4) + '%' : '-'}}</template>
              </el-table-column>
              <el-table-column label="代理期限" width="130">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.payment_mode != 2"
                  >{{scope.row.product_date ? scope.row.product_date + '个月' : '无限期'}}</span>
                  <span v-else>{{scope.row.product_date + '~' + scope.row.agency_stage_max + '个月' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="代理费支付方式" width="140">
                <template
                  slot-scope="scope"
                >{{scope.row.payment_mode == 0 || scope.row.payment_mode == 2 ? '按月支付' : '一次性支付'}}</template>
              </el-table-column>
              <el-table-column label="下单时间" width="180">
                <template slot-scope="scope">{{scope.row.agent_time | parseTime}}</template>
              </el-table-column>
              <el-table-column label="状态" width="130">
                <template slot-scope="scope">
                  <p v-html="initState(scope.row.start_status)"></p>
                </template>
              </el-table-column>
              <el-table-column label="合同" width="130">
                <template slot-scope="scope">
                  <p class="opera-tx" v-if="scope.row.contract_id">
                    <span @click="_previewContract(scope.row.contract_id)">查看合同</span>
                  </p>
                  <p class="opera-tx" v-if="scope.row.contract_id">
                    <span @click="_downloadContract(scope.row.contract_id)">下载合同</span>
                  </p>

                  <p class="red-tx" v-if="!scope.row.contract_id">未签署</p>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="130">
                <template slot-scope="scope">
                  <p class="opera-tx" @click="checkDetail(scope.row)">查看详情</p>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-pagination
          background
          layout="prev, pager, next, total, jumper"
          :page-size="listParams.limit"
          :total="paginationQuery.total"
          :current-page="listParams.p"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import ScreenBar from "@/components/ScreenBar/ScreenBar";
import { getAgentAjax } from "@/api/myagency";
import { parseTime } from "@/utils";
import { mapGetters } from "vuex";
import { previewContract, downloadContract } from "@/api/mycontract";
const LIMIT = 5;
export default {
  name: "myagency",
  computed: {
    ...mapGetters(["memberInfo"]),
  },
  data() {
    return {
      selectScreen: false,
      radioScreen: true,
      loadingText: "",
      tabList: [
        { keyword: "全部", count: 0 },
        { keyword: "审核中", count: 0 },
        { keyword: "代理中", count: 0 },
        { keyword: "已结束", count: 0 },
      ],
      agencyList: [],
      agencyState: [],
      paginationQuery: {
        total: 0,
      },
      listParams: {
        p: 1,
        limit: LIMIT,
        is_state: 0,
        is_deposit: 0,
      },
      loading: false,
    };
  },
  mounted() {
    console.log("是否代理商", this.memberInfo.status);
    if (this.memberInfo.status == 1) {
      this._getAgentAjax();
    } else {
      if (this.memberInfo.is_auth == 1) {
        this.$message.error("您还没加入云木屋代理，正在为您跳转");
        setTimeout(() => {
          this.$router.push({ name: "contractServices" });
        }, 1000);
      } else {
        this.$message.error("您还没有完成实名认证，正在为您跳转");
        setTimeout(() => {
          this.$router.push({ name: "explain" });
        }, 1000);
      }
    }
  },
  methods: {
    _getAgentAjax() {
      this.loading = true;
      this.loadingText = "拼命加载中";
      getAgentAjax(this.listParams)
        .then((res) => {
          this.agencyList = res.data.list || [];
          this.agencyState = res.data.statistics || [];
          this.paginationQuery.total = +res.data.total || 0;
          this.initTabCount();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    initState(state) {
      switch (state) {
        case 1:
          return '<span class="order-st-1">审核中</span>';
        case 2:
          return '<span class="order-st-2">代理中</span>';
        default:
          return '<span class="order-st-3">已结束</span>';
      }
    },
    initTabCount() {
      let list = this.agencyState;
      this.tabList.filter((item, index) => {
        item.count = list[index] || 0;
      });
    },
    checkDetail(row) {
      this.$router.push({
        name: "myagencydetail",
        params: { id: row.order_id },
      });
    },
    currentChange(index) {
      this.listParams.p = index;
      this._getAgentAjax();
    },
    changeState(type) {
      this.listParams.is_state = type;
      this.listParams.p = 1;
      this._getAgentAjax();
    },
    changeRadio(type) {
      this.listParams.is_deposit = type;
      this.listParams.p = 1;
      this._getAgentAjax();
    },
    rowClass() {
      return "background:rgba(240,249,252,1);font-size:14px;color:#999;font-weight:400;text-align:center;height:40px;padding: 0;";
    },
    cellStyle() {
      return "height:110px;font-size:14px;color:#333;text-align:center;";
    },

    // 查看合同
    _previewContract(id) {
      this.loading = true;
      this.loadingText = "合同生成中";
      let params = {
        contract_id: id,
      };
      previewContract(params)
        .then((res) => {
          console.log(res);
          if (res.code == 1 && res.data.url) {
            window.open(res.data.url);
            console.log(res.data.url);
          } else {
            this.$message.error(res.msg || "请求失败");
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 下载合同
    _downloadContract(id) {
      this.loading = true;
      this.loadingText = "合同生成中";
      let params = {
        contract_id: id,
      };
      downloadContract(params)
        .then((res) => {
          console.log("下载合同res", res);
          let blob = new Blob([res], { type: "application/pdf" });
          let objectUrl = window.URL.createObjectURL(blob);
          const fname = "代理合同";
          const contractLink = document.createElement("a");
          contractLink.style.display = "none";
          contractLink.href = objectUrl;
          contractLink.setAttribute("download", fname);
          document.body.appendChild(contractLink);
          contractLink.click();
          window.URL.revokeObjectURL(contractLink.href); // 释放URL对象
          document.body.removeChild(contractLink);
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  components: {
    ScreenBar,
  },
};
</script>

<style lang="scss">
  .myagency-wrapper {
      .table-wrapper{
        .el-table{
          .cell{
            line-height: 16px;
          }
        }
      }
  }
</style>
<style lang="scss" scoped>
.myagency-wrapper {
  width: 100%;
  height: 100%;
  padding: 20px;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  .myagency-wrapper-content{
    min-width: 1485px;
  }
  .title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    padding: 0 20px;
    height: 54px;
    line-height: 54px;
    background: #fff;
    border-radius: 8px;
    margin: 0;
    .line {
      display: inline-block;
      width: 3px;
      height: 18px;
      background: #fe6616;
      border-radius: 2px;
      margin: 0 10px -3px 0;
    }
  }
  .content {
    background: #fff;
    border-radius: 8px;
    margin-top: 12px;
    padding: 0 60px 20px;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .product_img {
      width: 85px;
      height: 85px;
    }
    .table-wrapper {
      margin-top: 20px;
      flex: 1;
      overflow: hidden;
      min-height: 591px;
      .el-table__row{
        .cell{
          line-height: 16px;
        }
      }
    }
  }
  .opera-tx {
    text-decoration: underline;
    color: #999;
    cursor: pointer;
    &:hover {
      color: #fe681c;
    }
  }
  .red-tx {
    color: #ccc;
  }
}

.el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
